<template>
  <div>
    <basic-search-form
      ref="searchForm"
      :pagination="pagination"
      :searchForm="searchForm"
      :getTableData="getTableData"
    >
    </basic-search-form>
    <basic-table
      :table="table"
      :selectRow="selectRow"
      :dialog="dialog"
      :loading="loading"
      :getTableData="getTableData"
      :pagination="pagination"
      :btnGroup="btnGroup"
    ></basic-table>
  </div>
</template>
<script>
import BasicTable from "@/components/basicTable";
import BasicSearchForm from "@/components/basicSearchForm";
import { deepClone } from "@/utils";

const delBtn = {
  label: "批量删除",
  type: "warning",
  disabled: true,
  isConfirm: true,
};
export default {
  components: {
    BasicTable,
    BasicSearchForm,
  },
  data() {
    return {
      loading: false,
      rowSelectData: [],
      table: {
        isSelect: true,
        data: [
          {
            id: 123,
            name: "lisi",
            age: 18,
            address: "天津",
            click: "点击",
            switch: false,
            select: "1",
            tag: "公司",
            image:
              "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          },
        ],
        column: [
          {
            label: "名字",
            prop: "name",
          },
          {
            label: "年龄",
            prop: "age",
          },
          {
            label: "地址",
            prop: "address",
          },
          {
            label: "可点击列",
            prop: "click",
            type: "columnClick",
            event: this.clickColumn,
          },
          {
            label: "开关",
            prop: "switch",
            type: "switch",
            event: this.switchColumn,
          },
          {
            label: "图片",
            prop: "image",
            type: "image",
            event: this.imageColumn,
          },
          {
            label: "下拉框",
            prop: "select",
            type: "select",
            placeholder: "请选择城市",
            options: [
              {
                label: "北京",
                value: "1",
              },
              {
                label: "南京",
                value: "2",
              },
            ],
            event: this.selectColumn,
          },
          {
            label: "标签",
            prop: "tag",
            type: "tag",
            tagType: "success",
            event: this.tagColumn,
          },
          {
            width: "580",
            label: "操作",
            rowBtnGroup: [
              {
                label: "编辑",
                event: this.edit,
                type: "primary",
              },
              {
                label: "删除",
                isConfirm: true,
                event: this.delete,
                type: "danger",
              },
              {
                label: "满足条件显示",
                event: this.shFn,
                type: "info",
                hide: { keyWord: "age", value: "18" },
              },
              {
                label: "有值显示",
                event: this.shFn,
                type: "info",
                show: { keyWord: "age" },
              },
              {
                label: [
                  { label: "开启", value: false },
                  { label: "关闭", value: true },
                ],
                event: this.shFn,
                check: true,
                keyWord: "switch",
                type: "info",
              },
            ],
          },
        ],
      },
      dialog: {
        title: "",
        width: "",
        dialogVisible: false,
        componentName: "",
        isEdit: false,
        entity: {},
      },
      pagination: {
        size: 10,
        current: 1,
        total: 0,
      },
      btnGroup: [
        {
          label: "新增",
          type: "primary",
          event: this.add,
        },
        deepClone(delBtn),
      ],
      searchForm: [
        {
          label: "输入框",
          prop: "name",
          type: "input",
          placeholder: "请输入姓名",
        },
        {
          label: "下拉框",
          prop: "region",
          type: "select",
          placeholder: "请选择",
          options: [
            {
              label: "活动一",
              value: "1",
            },
            {
              label: "活动二",
              value: "2",
            },
          ],
        },
        {
          label: "时间选择器",
          prop: "time",
          type: "dateTime",
        },
        {
          label: "联级选择器",
          prop: "Cascader",
          type: "Cascader",
          options: [],
        },
      ],
    };
  },
  methods: {
    selectRow(row) {
      if (row.length) {
        this.rowSelectData = row;
        let setDelBtn = deepClone(delBtn);
        setDelBtn.disabled = false;
        setDelBtn.event = this.delete;
        this.$set(this.btnGroup, 1, setDelBtn);
      } else {
        let setDelBtn = deepClone(delBtn);
        setDelBtn.disabled = true;
        this.$set(this.btnGroup, 1, setDelBtn);
      }
    },
    // 请求表格数据
    getTableData(pagination) {
      this.loading = true;
      this.pagination = pagination;
      const params = {
        ...pagination,
        ...this.$refs.searchForm.formInline,
      };
      console.log(params);

      // 请求数据
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    },
    edit(row) {
      (this.dialog.title = "编辑"), (this.dialog.componentName = "editForm");
      (this.dialog.width = "70%"), (this.dialog.dialogVisible = true);
      this.dialog.entity = row;
      this.dialog.isEdit = true;
    },
    add() {
      (this.dialog.title = "新建"), (this.dialog.componentName = "editForm");
      (this.dialog.width = "70%"), (this.dialog.dialogVisible = true);
      this.dialog.isEdit = false;
    },
    shFn(row) {},
    delete(row) {
      const params = row ? row.id : [];
      if (!row) {
        this.rowSelectData.map((item) => {
          params.push(item.id);
        });
      }
      console.log(params);
      //  *执行删除操作*
    },
    clickColumn(row) {
      console.log(row);
    },
    switchColumn(row) {
      console.log(row);
    },
    selectColumn(row) {
      console.log(row);
    },
    tagColumn(row) {
      console.log(row);
    },
    imageColumn(row) {
      console.log(row);
    },
  },
};
</script>
<style>
</style>